<template>
	<div class="myjd">

	 <!-- 头部 -->
		<div class="Login-header">
			<div>
			<router-link to="/Index">
				<img class="zjt" :src="puctuer.zjt" alt="" />
			</router-link>
			
			</div>
			<div>{{msg[0]}}</div>
			<!-- 循环头部的圆圈 -->
			<div>
			<ul v-for="item in list" :key="item.id">
				<li>{{ item }}</li>
			</ul>
			</div>
		</div>
		<div class="myjd-content">
			<div class="myjd-card">
				<div class="myjd-card-up">
					<img src="../assets/images/find/设置.png">

					<!-- 退出登录 -->
					<el-button class="elbtn" v-if="!isShow" id="elbtn" type="text" @click="logout">
						{{outin[1]}}
					</el-button>
					<!-- 请登录 -->
					<el-button class="elbtn" v-if="isShow" id="elbtn" type="text" @click="login">
						{{outin[0]}}
					</el-button>
				

				</div>
				<div class="myjd-card-down">
					<div class="myjd-card-down-left">
						<img src="../assets/images/tx.jpg" >
					</div>
					<div>
						<div class="myjd-card-down-right">
							<ul style="margin: 0px;">
								<li>用户名：{{showUserName}}</li>
								<li>
									<div class="myjd-card-gold">
										<img src="../assets/images/find/京东.png" ><span>金牌</span>
									</div>
									<div class="myjd-card-value">
										京享值19000
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="myjd-item1">
			<ul>
				<li>
					<img src="../assets/images/find/待付款.png" >
					<p>待付款</p>
				</li>
				<li>
					<img src="../assets/images/find/待收货.png" >
					<p>待收货</p>
				</li>
				<li>
					<img src="../assets/images/find/退换、售后.png" >
					<p>退换/售后</p>
				</li>
				<li>
					<img src="../assets/images/find/全部订单.png" >
					<p>全部订单</p>
				</li>
			</ul>
		</div>
		<div class="myjd-item2">
			<ul>
				<li>
					<span>9张</span>
					<p>京东券</p>
				</li>
				<li>
					<span>4610元</span>
					<p>白条额度</p>
				</li>
				<li>
					<span>527个</span>
					<p>京豆</p>
				</li>
				<li>
					<span>0张</span>
					<p>礼品卡</p>
				</li>
				<li>
					<img src="../assets/images/find/账户资产.png" >
					<p>全部资产</p>
				</li>
			</ul>
		</div>
		<div class="myjd-item3">
			<ul>
				<li>
					<span>18</span>
					<p>关注的商品</p>
				</li>
				<li>
					<span>8</span>
					<p>关注的店铺</p>
				</li>
				<li>
					<span>3</span>
					<p>浏览记录</p>
				</li>				
			</ul>
		</div>
		<div class="myjd-item4">
			<p>客服服务</p>
		</div>
		<div class="myjd-item5">
			<p>为您推荐</p>
		</div>
		<div class="myjd-shopthing">
			<ul>
				<li>
					<img src="../assets/images/find/我的京东_03.gif" >
					<div class="myjd-shopthing-info">
						<p>爱奇果澳洲进口金手<br>指黑提子1kg装 精...</p>
						<span>￥119.00</span>
					</div>
				</li>
				<li>
					<img src="../assets/images/find/我的京东_05.gif" >
					<div class="myjd-shopthing-info">
						<p>北京故事新品遮阳小<br>花刺绣户外运动棒...</p>
						<span>￥71.10</span>
					</div>
				</li>
			</ul>
			<ul>
				<li>
					<img src="../assets/images/find/我的京东_09.gif" >
					<div class="myjd-shopthing-info">
						<p>好想你 干果零食 新<br>疆特产 阿克苏灰枣...</p>
						<span>￥19.90</span>
					</div>
				</li>
				<li>
					<img src="../assets/images/find/我的京东_10.gif" >
					<div class="myjd-shopthing-info">
						<p>美依家<br>(EveryHome)...</p>
						<span>￥19.90</span>
					</div>
				</li>
			</ul>
		</div>
		<Allfooter />
	</div>
</template>

<script>
import { mapState } from 'vuex';
import Allfooter from '@/components/Allfooter.vue';
import jsCookie from 'js-cookie';
	export default {
		name: 'Myjd',
		components: {
            Allfooter
		},
        data() {
            return {
				outin:['请登录','退出登录'],
                msg:['购物车'],
				isShow:true,
                puctuer:{
                        zjt:require('@/assets/images/左箭头.png'),
                         },
                 list:['','','']
				 
            }
        },
	methods: {
	// 退出登录
	logout() {
        this.$confirm('是否确认退出登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出登录成功!',
			showClose: true,
          });
		  this.$router.replace('/Login')
		//		退出登录，清空token
		  sessionStorage.removeItem('token');
		// 		退出登录清除用户名
		  jsCookie.remove('username')
        }).catch(() => {
          
        });
		
    },
	// 请登录
	login(){
		this.$router.push('/Login')
	}
    },
	// 判断token是否存在，得到登录状态
	mounted(){
		if (sessionStorage.getItem('token')) {
			this.isShow=!this.isShow
		}else{
			jsCookie.remove('username')
		}
	},
	// 匹配登录时候用户名
	computed:{
		showUserName(){
			return jsCookie.get('username')
		},
		...mapState({
			loginStatus:state=>state.user.loginStatus,
			userInfo:state=>state.user.userInfo,
		})
	}
  }
	
</script>

<style scoped="scoped">
@import url("@/assets/css/myjd.css");
</style>
